<template>
	<view class="icons-container fu-flex fu-flex-wrap">
		<view class="icons__item" v-for="(item, index) in icons.glyphs" :key="index" @click="onClick(item)">
			<view class="fu-flex fu-flex-row-center">
				<fu-icons :name="item.name" size="30" color="#666666"></fu-icons>
			</view>
			<text class="fu-font-24">{{ item.name }}</text>
		</view>
	</view>
</template>

<script setup>
	import { ref } from 'vue';
	import icons from './icons.js';
	
	// methods方法
	const onClick = (e) => {
		uni.setClipboardData({
			data: e.name, // 要复制的内容
			success: res => { // 复制成功回调函数
				uni.showToast({
					title: '复制成功',
					icon: 'none'
				})
			}
		})
	};
</script>

<style lang="scss">
	page {
		background-color: $bg-color;
	}
	
	.icons {
		&__container {
			margin-bottom: 30rpx;
		}
		
		&__item {
			width: 30.4%;
			margin: 20rpx 10rpx;
			transform: scale(1);
			transition: transform 0.2s linear;
			transform-origin: center center;
			padding: 20rpx 0;
			text-align: center;
		}
	}
</style>